<template>
  <div class="steps3">
    <div class="container">
      <!-- title -->
      <div class="title">
        <p class="bigtitle">PAYMENT INFORMATION</p>
        <div class="descbox">
          <p class="dtitle"><span>MEETING PACKAGE</span></p>
          <p class="des">
            - The meeting package is <span>USD950/RMB6,688.</span>
          </p>
          <p class="des">
            - There are three payment options and for participant opting for Option 1 or 2, <br>payment needs to be made before 
            <span>November 10, 2023.</span>
          </p>
        </div>
      </div>
      <!-- option 1 -->
      <div class="payitem payBank">
        <div class="paytitle">Option 1: Bank Transfer to Host Hotel</div>
        <div class="paycontent">
          <div class="pitem">
            <div class="ptitle">
              <p>帐户名称</p>
              <p>Account Name</p>
            </div>
            <div class="pcont">
              <p>海南观澜湖商业发展有限公司海口丽思卡尔顿酒店</p>
              <p>THE RITZ-CARLTON, HAIKOU</p>
            </div>
          </div>
          <div class="pitem">
            <div class="ptitle">
              <p>银行帐号</p>
              <p>Account No</p>
            </div>
            <div class="pcont">
              <p>2662 7628 2561</p>
            </div>
          </div>
          <div class="pitem">
            <div class="ptitle">
              <p>开户银行</p>
              <p>Bank Name</p>
            </div>
            <div class="pcont">
              <p>中国银行股份有限公司海口琼山支行</p>
              <p>BANK OF CHINA QIONG SHAN SUB-BRANCH,HAINAN,CHINA</p>
            </div>
          </div>
          <div class="pitem">
            <div class="ptitle">
              <p>银行地址</p>
              <p>Bank Address</p>
            </div>
            <div class="pcont">
              <p>中国海南中国银行海口琼山支行建国路56号</p>
              <p>NO.56.JIANGUO ROAD FUCHENG QIONGSHAN HAINAN CHINA</p>
            </div>
          </div>
          <div class="pitem beizhu">
            <div class="ptitle">
              <p>请在转账时备注</p>
              <p>
                Add remarks <br />
                when transferring payment
              </p>
            </div>
            <div class="pcont">
              <div>
                <p>1. 付款方酒店的MASHA Code及酒店名称</p>
                <p>Masha code and hotel name of your hotel</p>
              </div>
              <div>
                <p>2. 目的：GC HR Conference</p>
                <p>Purpose: GC HR Conference</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- option 2 -->
      <div class="payitem payScan">
        <div class="paytitle">
          Option 2: Digital Payment (Mainland China Participants Only)
        </div>
        <div class="paycontent">
          <div class="scanbox">
            <p class="zn">请扫描以下二维码进行支付</p>
            <p class="en">Please scan below QR code to make the payment</p>
            <img
              src="../assets/img/qrcode.png"
              class="qrcode"
              alt="支付二维码-QRcode"
            />
          </div>
        </div>
      </div>
      <!-- option 3 -->
      <div class="payitem payTips">
        <div class="paytitle">
          Option 3: Credit Card (HQ Leaders + Hong Kong, Macau and Taiwan
          Participants)
        </div>
        <div class="paycontent">
          <p class="bold">
            For HQ Leaders and attendees from Hong Kong, Macau and Taiwan,
            please pay for the meeting package at check-in.
          </p>
        </div>
      </div>
      <div class="payline"></div>
      <!-- Room packages -->
      <div class="title">
        <div class="descbox roomdes">
          <p class="dtitle"><span>ROOM RESERVATION</span></p>
          <p>
            -Please make your room reservation
            <span>before November 15, 2023.</span>
          </p>
          <p>
            - Please book as early as possible due to the limited number of
            rooms available.
          </p>
          <p>
            - If you opt to share rooms, please share guest details via
            <br />
            <a href="rc.hakrz.reservation@ritzcarlton.com"
              >rc.hakrz.reservation@ritzcarlton.com</a
            >
            with hotel team as required.
          </p>
        </div>
      </div>
      <div class="payitem roomPackages">
        <!-- <div class="paytitle">Room Packages</div> -->
        <div class="roomcont">
          <div class="roominfo">
            <div class="rtitle">
              Book The Ritz-Carlton, Haikou via
              <a
                href="https://www.marriott.com/events/start.mi?id=1695294815043&key=GRP"
                >this link</a
              >
            </div>
            <div class="rcont">
              <el-row :gutter="10">
                <el-col :span="8"
                  ><div class="grid-content bg-purple">
                    <img src="../assets/img/room1.jpg" alt="" /></div
                ></el-col>
                <el-col :span="16"
                  ><div class="grid-content bg-purple-light">
                    <img src="../assets/img/room1txt.png" alt="" /></div
                ></el-col>
              </el-row>
            </div>
          </div>
          <div class="roominfo">
            <div class="rtitle">
              Book Renaissance Haikou via
              <a
                href="https://www.marriott.com/events/start.mi?id=1695293626357&key=GRP"
                >this link</a
              >
            </div>
            <div class="rcont">
              <el-row :gutter="10">
                <el-col :span="8"
                  ><div class="grid-content bg-purple">
                    <img src="../assets/img/room2.jpg" alt="" /></div
                ></el-col>
                <el-col :span="16"
                  ><div class="grid-content bg-purple-light">
                    <img src="../assets/img/room2txt.png" alt="" /></div
                ></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="payline"></div>
      <!-- 车辆价格 -->
      <div class="payitem carprice">
        <div class="title">
          <div class="descbox roomdes">
            <p class="dtitle"><span>TRANSPORTATION OPTIONS</span></p>
            <p>
              -
              <span class="bold"
                >The Ritz-Carlton, Haikou & Renaissance Haikou</span
              >
            </p>
            <p>
              - <span class="bold">Address:</span> No 39 Yangshan Boulevard,
              Longhua District, Haikou, Hainan, China, 571155
            </p>
            <p>- <span class="bold">Phone Number:</span> +86 898-6576 0114</p>
          </div>
        </div>
        <div class="caropts">
          <div class="optitem">
            <p class="bold">Airport:</p>
            <p>Haikou Meilan International Airport (16.0 KM)</p>
          </div>
          <div class="optitem">
            <p class="bold">Train Station:</p>
            <p>Haikou East Station (7.8 KM )</p>
            <p>Haikou Meilan Station (14.2 KM )</p>
          </div>
          <div class="optitem">
            <p class="bold">Other Transportation:</p>
            <p>
              Rates for limousines/vans are listed below, please contact Concierge on 8098 - 3669 9666 or email <a href="RC.Haikou.China.MOD@ritzcarlton.com">RC.Haikou.China.MOD@ritzcarlton.com</a> and <a href="Steven.Fu2@ritzcarlton.com">Steven.Fu2@ritzcarlton.com</a> at least 24 hours in advance to book
            </p>
          </div>
        </div>
      </div>
      <img src="../assets/img/caprice.jpg" class="carpriceimg" alt="carprice" />
      <div class="tips">
        If you have any questions, please contact
        <span>GC.HRConference@marriott.com</span>
      </div>
      <!-- close -->
      <button type="button" class="close" @click="$router.push('/index')">
        Close
      </button>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    window.scrollTo(0, 0);
  },
};
</script>
<style lang="less" scoped>
.steps3 {
  .line {
    height: 6px;
    background: #231815;
  }
  //
  .container {
    max-width: 1012px;
    margin: auto;
    padding-top: 3rem;
    //
    .title {
      width: 100%;
      margin: auto;
      p {
        text-align: center;
      }
      .bigtitle {
        font-size: 3rem;
        line-height: 1.3;
        font-family: "RidleyBold";
        color: #231815;
        font-style: normal;
        text-align: center;
        padding-bottom: 2rem;
      }
      .descbox {
        width: 100%;
        margin-top: 0.5rem;
        background: #f18f61;
        padding: 0.5rem 0 1.2rem;
        p {
          font-family: "RidleyMedium";
          font-size: 1rem;
          color: #231815;
          text-align: center;
          // padding-left: 4rem;
          span {
            font-family: "RidleyBold";
          }
        }
        .dtitle {
          font-size: 3rem;
        }
      }
      .roomdes {
        background: #bdb9b8;
      }
    }
    .payitem {
      background: #f9f6f4;
      margin-top: 1rem;
      .paytitle {
        background: #f18f61;
        color: #ffffff;
        padding: 0.7rem 0 0.7rem 2.8rem;
        font-size: 1.5rem;
        font-family: "RidleyBold";
      }
      .paycontent {
        width: 89%;
        padding: 1.5rem 0 3rem 3rem;
        .pitem {
          width: 100%;
          display: flex;
          border-bottom: 2px solid #b7b4b3;
          box-sizing: border-box;
          text-align: left;
          padding-top: 0.8rem;
          .ptitle,
          .pcont {
            p {
              font-size: 1.01rem;
              color: #000000;
              line-height: 1;
            }
            p:last-child {
              font-family: "RidleyMedium";
              padding: 0.5rem 0;
            }
            p:first-child {
              font-family: "SourceHanSansCN-Bold";
              padding-top: 0.3rem;
            }
          }
          .ptitle {
            width: 32%;
          }
          .pcont {
            flex: 1;
          }
        }
        .pitem:nth-child(2) {
          .pcont {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: flex-start;
          }
        }
        .beizhu {
          border-bottom: 0;
          .pcont {
            div {
              margin-bottom: 1rem;
            }
            div:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
    //option 2
    .payScan {
      .paycontent {
        padding-bottom: 2rem;
        .scanbox {
          width: 100%;
          p {
            font-size: 1.1625rem;
            color: #000000;
          }
          .zn {
            font-family: "SourceHanSansCN-Bold";
          }
          .en {
            font-family: "RidleyBold";
          }
          .qrcode {
            padding-top: 1rem;
          }
        }
      }
    }
    //分割线
    .payline {
      width: 100%;
      height: 2px;
      background: #8a8482;
      margin: 2rem auto;
    }
    //roomPackages
    .roomPackages {
      .roomcont {
        width: 91.7%;
        margin: 0 auto;
        .roominfo {
          width: 100%;
          padding-top: 1rem;
          .rtitle {
            font-size: 1.125rem;
            font-family: "RidleyBold";
            color: #000000;
            a {
              text-decoration: underline;
              color: #0000ee;
            }
          }
          .rcont {
            .el-row {
              padding-top: 0.5rem;
              .el-col {
                .grid-content {
                  img {
                    max-width: 100%;
                  }
                }
              }
            }
          }
        }
        .roomdes {
          padding: 1.5rem 0;
          text-align: left;
          font-size: 1rem;
          color: #231815;
          font-family: "RidleyMedium";
          span {
            color: #f18f61;
          }
        }
      }
    }

    //车辆价格
    .carprice {
      .caropts {
        width: 90%;
        margin-left: 2.8rem;
        padding: 1rem 0 0;
        .optitem {
          padding-bottom: 0.8rem;
          margin-bottom: 0.5rem;
          border-bottom: 2px solid #bdb9b8;
          box-sizing: border-box;
        }
        .optitem:last-child {
          border-bottom: none;
        }
      }
    }
    //价格详情表
    .carpriceimg {
      width: 100%;
    }

    .tips {
      font-size: 1rem;
      padding: 1rem 0 0 2.7rem;
      span {
        color: #f18f61;
        cursor: pointer;
        user-select: all;
      }
    }
    //close
    .close {
      display: block;
      border-style: none;
      border: 0;
      margin: 3rem auto;
      color: #ffffff;
      background: #f18f61;
      font-size: 1.5rem;
      font-family: "RidleyBold";
      line-height: 1.3;
      padding: 0 12%;
    }
  }
}
@media only screen and (max-width: 600px) {
  .steps3 {
    .container {
      padding-top: 2rem;
      .title {
        .bigtitle {
          font-size: 1.5rem;
          padding-bottom: 2rem;
        }
        .descbox {
          p {
            font-size: 0.7rem;
          }
          .dtitle {
            font-size: 1.5rem;
          }
        }
      }
      .payitem {
        .paytitle {
          font-size: 1rem;
          padding: 0.5rem 0 0.5rem 0.8rem;
        }
        .paycontent {
          width: 92%;
          padding: 1.5rem 0 3rem 1rem;
          .pitem {
            .ptitle,
            .pcont {
              p {
                font-size: 0.7rem;
              }
            }
          }
        }
      }
      .payScan {
        .paycontent {
          .scanbox {
            p {
              font-size: 0.8rem;
            }
          }
        }
      }
      .roomPackages {
        .roomcont {
          .roominfo {
            .rtitle {
              font-size: 0.8rem;
            }
          }
        }
      }
      .carprice {
        .caropts {
          margin-left: 0.8rem;
          .optitem {
            font-size: 0.8rem;
          }
        }
      }
      .tips {
        font-size: 0.7rem;
        padding: 1rem 0 1rem 0.8rem;
      }
    }
  }
}
</style>
